<template>
    <BaseEcharts :options="option" :styleConfig="{ width: '400px', height: '400px' }" />
</template>

<script lang="ts" setup>
let option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '0%',
        left: 'center',
        orient: 'vertical',
        show: true, // 是否显示图例
        icon: 'circle',
        // itemGap: 15, // 图例间距
        itemWidth: 18,
        textStyle: {
            fontSize: 14,
            color: '#333'
        },
        formatter: function (name: string) {
            return name + '  ' + 1048 + '  天';
        }
    },
    color: ['#E6A23C', '#409EFF'],
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 1,
            itemStyle: {
                borderRadius: 2
            },
            label: {
                show: true,
                position: 'center',
                formatter: function () {
                    // 自定义标签内容
                    // 使用 '\n' 连接两个字符串，形成多行文本
                    return '{a|共计}' + '{b|202}' + '{c|天}';
                },
                rich: {
                    // 富文本样式配置
                    a: {
                        fontSize: 20,
                        color: '#000000',
                        padding: 10
                    },
                    b: {
                        fontSize: 16,
                        color: '#F00'
                    },
                    c: {
                        fontSize: 20,
                        color: '#000000',
                        padding: 10
                    }
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '销量' },
                { value: 735, name: '占比' }
            ]
        }
    ]
});
</script>
